<template>
    <el-row :gutter="16">
        <el-col :span="24" style="margin-bottom: 16px;">
            <MyCard>
                <div style="display: flex; justify-content: end; line-height: 32px;">
                    <el-button-group>
                        <el-button @click="choseBtn = 'thirtyday'">30天</el-button>
                        <el-button @click="choseBtn = 'week'">周</el-button>
                        <el-button @click="choseBtn = 'year'">年</el-button>
                    </el-button-group>
                </div>
                <VueEcharts style=" height: 370px;" :option="usersOrder"></VueEcharts>
            </MyCard>
        </el-col>
        <!-- lg表示浏览器宽度 >1200 -->
        <el-col :lg="12" :md="24" class="md-margin">
            <MyCard>
                <VueEcharts style="height: 370px;" :option="usersOption"></VueEcharts>
            </MyCard>
        </el-col>
        <el-col :lg="12" :md="24">
            <MyCard>
                <VueEcharts style=" height: 370px;" :option="buyUsersOption"></VueEcharts>
            </MyCard>
        </el-col>
    </el-row>

</template>

<script setup lang="ts">
import { getBuyUsersApi, getUsersApi, getUsersOrderApi } from '@/api/home';
import { computed, onMounted, ref, watch } from 'vue';

const buyUsersData = ref<{ id: string, title: string, count: number }[]>([])
const usersData = ref<{ count: number[], date: string[] }>({ count: [], date: [] });
const usersOrderData = ref<{ date: string[], orderCount: number[], orderMoney: number[] }>({ date: [], orderCount: [], orderMoney: [] });
const choseBtn = ref('year');

onMounted(() => {
    getBuyUsers();
    getUsers();
    getUsersOrder(choseBtn.value);
})

watch(choseBtn, () => {
    if (choseBtn.value == 'year') {
        maxLeft.value = 4000000;
        maxRight.value = 400
        intervalLeft.value = 1000000;
        intervalRight.value = 100
    }
    if (choseBtn.value == 'week') {
        maxLeft.value = 7000;
        maxRight.value = 8;
        intervalLeft.value = 1000;
        intervalRight.value = 2;
    }
    if (choseBtn.value == 'thirtyday') {
        maxLeft.value = 150000;
        maxRight.value = 50;
        intervalLeft.value = 50000;
        intervalRight.value = 10
    }
    getUsersOrder(choseBtn.value);
});
const maxLeft = ref(4000000);
const maxRight = ref(400);
const intervalLeft = ref(1000000);
const intervalRight = ref(100);
const usersOrder = computed(() => {
    return {
        grid: {
            left: '6%',
            right: '6%',
            bottom: 40
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: ['金额', '数量']
        },
        xAxis: [
            {
                type: 'category',
                data: usersOrderData.value.date,
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: { interval: 0, rotate: 30 },
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '金额',
                min: 0,
                max: maxLeft.value,
                interval: intervalLeft.value,
            },
            {
                type: 'value',
                name: '数量',
                min: 0,
                max: maxRight.value,
                interval: intervalRight.value,
            }
        ],
        series: [
            {
                name: '金额',
                type: 'bar',
                data: usersOrderData.value.orderMoney
            },
            {
                name: '数量',
                type: 'line',
                yAxisIndex: 1,
                data: usersOrderData.value.orderCount
            }
        ]
    };
})
const buyUsersOption = computed(() => {
    return {
        color: ["#5769ff", "#d458d4", "#3bb346", "#fbda32"],

        title: {
            text: '购买用户统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: buyUsersData.value.map(item => { return { value: item.count, name: item.title } }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
})

const usersOption = computed(() => {
    return {
        grid: {
            left: '4%',
            right: '4%',
            top: 40,
            bottom: 40
        },
        xAxis: {
            type: 'category',
            data: usersData.value.date,
            axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                showSymbol: false,  // 去掉折线图的小圆点
                data: usersData.value.count,
                type: 'line',
                smooth: true, // 平滑曲线图
                areaStyle: {} // 折线图下方的背景颜色
            }
        ]
    }
})


function getBuyUsers() {
    getBuyUsersApi().then(res => {
        if (res.code == 200) {
            buyUsersData.value = res.data;
        }
    })
}
function getUsers() {
    getUsersApi().then(res => {
        if (res.code == 200) {
            usersData.value = res.data
        }
    })
}
function getUsersOrder(data: string) {
    getUsersOrderApi({ cycle: data }).then(res => {
        if (res.code == 200) {
            usersOrderData.value = res.data
        }
    })
}

</script>

<style scoped>
/* 媒体查询 */
/* max-width：1200px 表示【最大宽度1200px】 */
/* 只有当浏览器宽度小于1200px时，内部的CSS才会生效 */
@media (max-width: 1200px) {
    .md-margin {
        margin-bottom: 16px;
    }
}
</style>